<script setup lang="ts">
import { onMounted, ref } from "vue";
import ListView from "../src/components/List.vue";
import axios from "axios";
import type { ChannelList, Item } from "./type";

const tabList = ref<Item[]>([]);
const getList = async () => {
  const res = await axios.request<ChannelList>({
    url: "http://geek.itheima.net/v1_0/channels",
    method: "GET",
  });
  tabList.value = res.data.data.channels;
  console.log(tabList.value);
};
onMounted(() => {
  getList();
});
</script>

<template>
  <!-- tab切换 -->
  <van-tabs>
    <van-tab v-for="item in tabList" :key="item.id" :title="item.name">
      <!-- 文章列表组件 顶顶顶-->
      <ListView :id="item.id" />
    </van-tab>
  </van-tabs>

</template>


